<!-- 指令用量变更记录：蹇泽阳 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />

    <div class="container mt10">
      <el-card shadow="never" :body-style="{ padding: '10px 10px 10px' }" class="mr10" style="flex-shrink: 0">
        <div slot="header" class="mb9 f16">
          <span style="font-weight: 600">选择版本</span>
        </div>
        <Table :tableData="tableData" :tableHeader="tableHeader" @currentRow="currentRow" :outTableHeight="80" :isLoading="isLoading" />
        <PageModule
          :PageData="{ total, pageSizeShow: true, buttonS: true }"
          :layout="'prev, pager'"
          @pageSizeChange="handleSizeChange"
          @pageChange="handleCurrentChange"
        />
      </el-card>

      <el-card shadow="never" :body-style="{ padding: '0px' }" class="main">
        <el-card shadow="never" :body-style="{ padding: '10px 10px 10px' }">
          <div slot="header" class="mb9 f16">
            <span style="font-weight: 600" class="mr10">指令用量差异</span>
            <!-- <span class="f12">注:部位名称标记绿色：<span style="color: #00ff00">材料有差异</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="f12">注:用量差异标记绿色：<span style="color: #00ff00">材料已订购</span></span> -->
          </div>
          <Table
            :tableData="tableData2"
            :tableHeader="tableHeader2"
            :TableHeight="70"
            :outTableHeight="140"
            @currentRow="currentRow2"
            :isLoading="isLoading2"
          />
        </el-card>
        <!-- <el-card shadow="never" :body-style="{ padding: '10px 10px 10px' }">
          <div slot="header" class="mb9 f16">
            <span style="font-weight: 600">子材料用量差异</span>
          </div>
          <Table
            :tableData="tableData3"
            :tableHeader="tableHeader3"
            :TableHeight="30"
            :outTableHeight="140"
            style="margin-right: 30px"
            :isLoading="isLoading3"
          />
          <PageModule :PageData="{ pageSizeShow: true }" />
        </el-card> -->
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import type { formListType } from '@/components/Find/index.vue'
import { selectList } from '@/plugins/mixin'
import fileRequest from '@/utils/fileRequest'
import service from '@/utils/request'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash'
import { defineComponent, onMounted, ref, watch } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'InstructionQuery'
})
</script>
<script lang="ts" setup>
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入配色',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '变更原因',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '型体',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '变更日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
  // {
  //   type: 'button',
  //   checkboxLabel: '导出当前行明细'
  // }
  // {
  //   type: 'button',
  //   checkboxLabel: '导出',
  // },
])
const tableHeader = ref([
  {
    label: '指令号',
    prop: 'lotNo',
    width: '87'
  },
  {
    label: '版本',
    prop: 'version',
    width: '50'
  },
  {
    label: '变更时间',
    prop: 'updateTime',
    width: '70'
  },
  {
    label: '变更原因',
    prop: 'remark',
    width: '120'
  }
])

// 表一模块
// '置空'按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
    getTableList()
  }
  if (content === '导出当前行明细') {
    const res = (await fileRequest.get(`/change/exportChange?lotNo=${currentTableRow.value.lotNo}&version=${currentTableRow2.value.version}`)) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    const FileName = decodeURI(res.headers['content-disposition'].split(`filename=`)[1])
    link.download = FileName //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
}
const tableData = ref([])
const isLoading = ref(true)
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>(`/mes/kf/lotUsageQuery/getPcOrderChg?pageNum=${currentPage.value}&pageSize=${pageSize.value}`, {
    color: formList.value.find((item: any) => item.inputPlaceholder === '请输入配色')?.inputValue,
    lotNo: formList.value.find((item: any) => item.inputPlaceholder === '请输入指令')?.inputValue,
    remark: formList.value.find((item: any) => item.selectP === '变更原因')?.selectValue,
    style: formList.value.find((item: any) => item.selectP === '型体')?.selectValue,
    updateTimeEnd: formList.value.find((item: any) => item.dateLabel === '变更日期')?.dateValue?.[1],
    updateTimeStart: formList.value.find((item: any) => item.dateLabel === '变更日期')?.dateValue?.[0],
    pageNum: currentPage.value,
    pageSize: pageSize.value
    // shortStatus: cfmFlag(), //	有无欠数(Y/N)	string	body	true
  })
  isLoading.value = false
  tableData.value = tableDataList.rows
  total.value = tableDataList.total
  currentRow()
}, 700)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  async () => {
    // if (formList.value[0].inputValue !== '') {
    //   let data = await service.get<any, any>('/change/getStyle2Color', {
    //     params: {
    //       lotNo: formList.value[0].inputValue
    //     }
    //   })
    //   formList.value[1].inputValue = data.color
    //   formList.value[3].selectValue = data.style
    // }

    getTableList()
  }
)
const isLoading2 = ref(true)
const currentTableRow = ref({}) as any
// 点击表给另一张表传数据
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
  isLoading2.value = true
  // 给表二传指令号
  let table2Data = await service.post<any, any>(`/mes/kf/lotUsageQuery/getPcOrderUsageChg`, row)
  let table = table2Data.rows.map((item: any) => {
    item.purFlag === 'Y' ? (item.backgroundColor = '#00e000') : (item.backgroundColor = '#ffffff')
    return item
  })
  isLoading2.value = false
  tableData2.value = table
  currentRow2()
}

// 表二
const tableData2 = ref([])
const tableHeader2 = ref([
  {
    label: '版本',
    prop: 'version',
    width: '50'
  },
  {
    label: '料号',
    prop: 'mtlNo',
    width: '140'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor',
    width: '130'
  },
  {
    label: '品名',
    prop: 'mtlName',
    width: '280'
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    width: '73'
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    width: '73'
  },
  {
    label: '原用量',
    prop: 'ttlUsagePre',
    width: '73'
  },
  {
    label: '现用量',
    prop: 'ttlUsageNow',
    width: '73'
  },
  {
    backgroundColor: true,
    label: '用量差异',
    prop: 'ttlUsageDifference'
  },
  {
    label: '备注',
    prop: 'remark',
    width: '139'
  }
])
const isLoading3 = ref(true)
const currentTableRow2 = ref({}) as any
const currentRow2 = async (row: any = tableData2.value[0] ? tableData2.value[0] : {}) => {
  currentTableRow2.value = row
  isLoading3.value = true
  // let { mtlNo, version, seqNo, lotNo }: any = row
  // // 给表二传指令号
  // let table2Data = await service.post<any, any>(`/mes/kf/lotUsageQuery/getPcOrderUsageChg`, row)
  // tableData3.value = table2Data
  // isLoading3.value = false
}

const tableHeader3 = ref([
  {
    cfmFlag: '#00e000',
    label: '料号',
    prop: 'subMtlNo',
    width: '109'
  },
  {
    label: '材料名称',
    prop: 'subMtlName',
    width: '348'
  },
  {
    label: '材料颜色',
    prop: 'subMtlColor',
    width: '183'
  },
  {
    label: '规格',
    prop: 'subMtlSpec',
    width: '141'
  },
  {
    label: '单位',
    prop: 'subMtlUnit',
    width: '153'
  },
  {
    label: '比例',
    prop: 'percent',
    width: '73'
  },
  {
    label: '原用量',
    prop: 'subTtlUsagePre',
    width: '73'
  },
  {
    label: '现用量',
    prop: 'subTtlUsageNow',
    width: '73'
  },
  {
    label: '差异用量',
    prop: 'usageVariance',
    width: '73'
  }
])
const tableData3 = ref([])
const getSelectList = async () => {
  await selectList(formList, () => service.get('/change/getConditionBox'))
  let sty = formList.value.find((item: any) => (item.type === 'select' && item.selectP === '货号') || item.selectP === '型体') as formListType
  const res = (await service.get('/bioDeptWrok/getStyleBack')) as any
  if (res && sty) {
    ;(res as string[]).forEach((item: string, index) => {
      if (item === null) return
      sty.selectOptions?.push({
        optionKey: index,
        optionValue: item,
        optionLabel: item
      })
    })
  }
}
onMounted(() => {
  getSelectList()
})
</script>

<style lang="less" scoped>
.container {
  display: flex;

  .btns {
    display: flex;
    justify-content: end;
    margin: 10px 0 0px;

    .bg {
      background-color: #e7e7e7;
      border: 1px solid #e7e7e7;
      color: #000000;
    }
  }
}
</style>
